<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/loginredirect.jsp"%>

<head>
    <title><fmt:message key="menu.js1"/></title>
    <meta name="heading" content="<fmt:message key='menu.forms'/>"/>
    <meta name="menu" content="FormsMenu"/>




    <script src='dwr/interface/EMBGValidator.js'></script>
    <script src='dwr/interface/Search.js'></script>
    <script src='dwr/engine.js'></script>
    <script src='dwr/util.js'></script>

<script>
        function checkEMBG(){

            var embg = document.getElementById("basicInfoSocScrNo");
            //var country = document.getElementById("birthCountrySelect");
            //var value = country.options[country.selectedIndex].text;
            var country = jQuery("#birthCountry");
            var value = country.val();
            if (value=='<fmt:message key="Makedonija"/>'){
            EMBGValidator.checkEMBG(embg.value,{callback:function(a){
                    if(a!=1){
                        alert("<fmt:message key="errorEMBG"/>");
                    }
                }});
            }
            EMBGValidator.exsistEMBG(embg.value,{callback:function(a){
                    if(a!=true){
                        alert("<fmt:message key="exsistEMBG"/>");
                    }
                }});
        }






    </script>

</head>
<div class="jquery_tab_container">
    <span class="heading_tab advanced_link active tab1"><fmt:message key="menu.js1"/></span>
</div>

<div class="jquery_tab">
    <div class="content_block"></div>
<form:form class="popupDeleteForm"  commandName="basicInfoForm" method="post" action="basicinfoform" id="basicInfoForm" onsubmit="return validateBasicInfoForm(this)">
    <form:errors path="*" cssClass="error" element="div"/>
    <form:hidden path="basicInfo.id"/>

    <p>
            <appfuse:label styleClass="left width150" key="basicInfo.lastName"/>
            <form:input path="basicInfo.lastName" id="basicInfo.lastName" cssClass="input-medium left toCyr" cssErrorClass="input-medium left error" maxlength="50"/>
            <form:errors path="basicInfo.lastName" cssClass="fieldError left"/>
        <br class="clearboth" />
    </p>
    <p>
            <appfuse:label styleClass="left width150" key="basicInfo.fathersName"/>
            <form:input path="basicInfo.fathersName" id="basicInfo.fathersName" cssClass="input-medium left toCyr" cssErrorClass="input-medium left error" maxlength="50"/>
            <form:errors path="basicInfo.fathersName" cssClass="fieldError left"/>
        <br class="clearboth" />
    </p>
    <p>
            <appfuse:label styleClass="left width150" key="basicInfo.firstName"/>
            <form:input path="basicInfo.firstName" id="basicInfo.firstName" cssClass="input-medium left toCyr" cssErrorClass="input-medium left error" maxlength="50"/>
            <form:errors path="basicInfo.firstName" cssClass="fieldError left"/>
        <br class="clearboth" />
    </p> <p>
            <appfuse:label styleClass="left width150" key="basicInfo.gender"/>
            <form:select path="basicInfo.gender"  cssClass="input-medium left toCyr" id="genderSelect">
                <form:option id="1" value="">
                    <fmt:message key="genderSearch"/>
                </form:option>
                <c:if test="${'Male' == basicInfoForm.basicInfo.gender}"> 
                    <form:option id="2" value="Male" selected="true" >
                        <fmt:message key="male"/>
                    </form:option> 
                </c:if>  
                <c:if test="${'Male' != basicInfoForm.basicInfo.gender}"> 
                    <form:option id="2" value="Male" >
                        <fmt:message key="male"/>
                    </form:option>  
                </c:if>
                <c:if test="${'Female' == basicInfoForm.basicInfo.gender}"> 
                    <form:option id="3" value="Female" selected="true" >
                        <fmt:message key="female"/>
                    </form:option> 
                </c:if>  
                <c:if test="${'Female' != basicInfoForm.basicInfo.gender}"> 
                    <form:option id="3" value="Female" >
                        <fmt:message key="female"/>
                    </form:option>  
                </c:if>
            </form:select>
            <br class="clearboth" />
            </p>
        <p>
            <appfuse:label styleClass="left width150" key="basicInfo.birthDate"/>
            <form:input  path="basicInfo.birthDate"  cssClass="input-medium flexy_datepicker_input" id="basicInfo.birthDate"
                         value="" name="flexy_datepicker" cssErrorClass="text medium error"/>
            <form:errors path="basicInfo.birthDate" cssClass="fieldError left"/>
        <br class="clearboth" />
        </p>
        <p>
            <appfuse:label styleClass="left width150" key="basicInfo.birthCountry"/>
            <form:input id="birthCountry" path="basicInfo.birthCountry.name" cssClass="input-medium toCyr" cssErrorClass="text medium error"/>
            <form:hidden id="birthCountryId" path="basicInfo.birthCountry.id"/>
            <br class="clearboth" />
        </p>
        <p>
            <appfuse:label styleClass="left width150" key="basicInfo.birthMunicipality"/>
           
            <form:input id="birthMunicipality" class="input-medium toCyr" path="basicInfo.birthMunicipality.name" />
            <form:hidden id="birthMunicipalityId" path="basicInfo.birthMunicipality.id"/>
            <br class="clearboth" />
            </p><p>
           <appfuse:label styleClass="left width150" key="basicInfo.birthArea"/>
         
            <form:input id="birthArea" class="input-medium toCyr" path="basicInfo.birthArea.name" />
            <form:hidden id="birthAreaId" path="basicInfo.birthArea.id"/>
            <br class="clearboth" />
           </p>
                    <p>
            <appfuse:label styleClass="left width150" key="basicInfo.AddrStreet"/>
            <form:input path="basicInfo.AddrStreet" class="input-medium toCyr" id="basicInfo.AddrStreet" cssClass="input-medium left toCyr" cssErrorClass="input-medium left error" maxlength="50" />
            <form:errors path="basicInfo.AddrStreet" cssClass="fieldError left"/>
        <br class="clearboth" />
        </p>
        <p>
            <appfuse:label styleClass="left width150" key="basicInfo.number"/>
            <form:input path="basicInfo.Number" class="input-medium toCyr" id="basicInfoNumber" cssClass="input-medium left toCyr" cssErrorClass="input-medium left error" maxlength="50" />
            <form:errors path="basicInfo.Number" cssClass="fieldError left"/>
        <br class="clearboth" />
       </p>
        <p>
             <appfuse:label styleClass="left width150" key="basicInfo.socScrNo"/>
            <form:input path="basicInfo.socScrNo" id="basicInfoSocScrNo"  class="input-medium toCyr" cssErrorClass="input-medium left error" maxlength="50" onchange="checkEMBG()"/>
            <form:errors path="basicInfo.socScrNo" cssClass="fieldError left"/>
        <br class="clearboth" />
             </p>

       <p>
            <appfuse:label styleClass="left width150" key="basicInfo.country"/>
           
            <form:input id="country" path="basicInfo.country.name" cssClass="input-medium toCyr" cssErrorClass="text medium error"/>
            <form:hidden id="countryId" path="basicInfo.country.id"/>
            <br class="clearboth" />
            </p>
            <p>
            <appfuse:label styleClass="left width150" key="basicInfo.municipality"/>
            
            <form:input id="municipality" class="input-medium toCyr" path="basicInfo.municipality.name" />
            <form:hidden id="municipalityId" path="basicInfo.municipality.id"/>
            <br class="clearboth" />
            </p>
            <p>
           <appfuse:label styleClass="left width150" key="basicInfo.area"/>
           
            <form:input id="area" class="input-medium toCyr" path="basicInfo.area.name" />
            <form:hidden id="areaId" path="basicInfo.area.id"/>
            <br class="clearboth" />
           </p>
           <p>
            <appfuse:label styleClass="left width150" key="basicInfo.eduLvl"/>
            <form:select path="basicInfo.eduLvl.id" class="input-medium toCyr" id="eduLvlSelect">
                <form:option id="1" value="">
                    <fmt:message key="eduLvlSearch"/>
                </form:option>
                <c:forEach items="${basicInfoForm.educationLevels}" var="eduLvl">

                    <c:if test="${eduLvl == basicInfoForm.basicInfo.eduLvl}">
                        <form:option value="${eduLvl.id}" id="${basicInfoForm.basicInfo.eduLvl.id}" selected="true" >
                            ${eduLvl.eduLvlName}
                        </form:option>
                    </c:if>
                    <c:if test="${eduLvl != basicInfoForm.basicInfo.eduLvl}">
                        <form:option value="${eduLvl.id}" id="${basicInfoForm.basicInfo.eduLvl.id}" >
                            ${eduLvl.eduLvlName}
                        </form:option>
                    </c:if>
                </c:forEach>
            </form:select>
            <br class="clearboth" />
            </p>
         
            <p>
            <appfuse:label styleClass="left width150" key="basicInfo.school"/>
            <form:input path="basicInfo.school" id="basicInfo.school" cssClass="input-medium left toCyr" cssErrorClass="input-medium left error" maxlength="50"/>
            <form:errors path="basicInfo.school" cssClass="fieldError left"/>
        <br class="clearboth" />
            </p>
            <p>
            <appfuse:label styleClass="left width150" key="basicInfo.department"/>
            <form:input path="basicInfo.department" id="basicInfoDepartment" cssClass="input-medium left toCyr" cssErrorClass="input-medium left error" maxlength="50"/>
            <form:errors path="basicInfo.department" cssClass="fieldError left"/>
        <br class="clearboth" />
            </p>
            <appfuse:label styleClass="left width150" key="basicInfo.nationality"/>
            <form:select path="basicInfo.nationality.id" id="nationalitySelect">
                <form:option id="1" value="">
                    <fmt:message key="nationalitySearch"/>
                </form:option>
                <c:forEach items="${basicInfoForm.nationalities}" var="nationality">

                    <c:if test="${nationality == basicInfoForm.basicInfo.nationality}">
                        <form:option value="${nationality.id}" id="${basicInfoForm.basicInfo.nationality.id}" selected="true" >
                            ${nationality.nationalityName}
                        </form:option>
                    </c:if>
                    <c:if test="${nationality != basicInfoForm.basicInfo.nationality}">
                        <form:option value="${nationality.id}" id="${basicInfoForm.basicInfo.nationality.id}" >
                            ${nationality.nationalityName}
                        </form:option>
                    </c:if>
                </c:forEach>
            </form:select>
       
            <form:hidden id="reasonDelete" path="savedReason.id"/>
           
        <br class="clearboth" />
        
        <p class="buttonBar bottom">
            <input type="submit" class="button" name="save" value="<fmt:message key="button.save"/>"/>
            

                    <c:if test="${not empty basicInfoForm.basicInfo.id}">
                    <input type="button" class="button" onclick="confirmDelete();"
                        value="<fmt:message key="button.delete"/>" />
                    </c:if>
            <input type="submit" class="button" name="cancel" value="<fmt:message key="button.cancel"/>" onclick="bCancel=true"/>
        </p>
    
</form:form>


<div id="confirmdelete">
    <fmt:message key="delete.reasonDescription" />
    <select id="deleteReasonId">
        <c:forEach items="${basicInfoForm.deleteReason}" var="reason">
             <option value="${reason.id}">
                ${reason.name}
             </option>
        </c:forEach>
    </select>
</div>

    
    
</div>


<v:javascript formName="basicInfoForm" cdata="false" dynamicJavascript="true" staticJavascript="false"/>
<script type="text/javascript" src="<c:url value='/scripts/validator.jsp'/>"></script>
<script type="text/javascript">
    Form.focusFirstElement($('basicInfoForm'));

</script>




<script type="text/javascript">
 new Autocomplete('birthCountry', {
    serviceUrl:'<c:url value="/hello.json" />',
    minChars:1,
    clazz: "Country",
    parent: "",
    maxHeight:500,
    width:300,
    deferRequestBy:300,
    // callback function:
    onSelect: function(value, data){
        jQuery("#birthCountryId").val(data);
         enableField("1", "#birthMunicipality");
    }
  });
</script>
        <script type="text/javascript">

  new Autocomplete('birthMunicipality', {
    serviceUrl:'<c:url value="/hello.json" />',
    minChars:1,
    clazz: "Municipality",
    parent: "#birthCountry",
    maxHeight:500,
    width:300,
    deferRequestBy:300,
    // callback function:
    onSelect: function(value, data){
       jQuery("#birthMunicipalityId").val(data);
       enableField("1", "#birthArea");
    }
  });
</script>
        <script type="text/javascript">

  new Autocomplete('birthArea', {
    serviceUrl:'<c:url value="/hello.json" />',
    minChars:1,
    clazz: "GeoArea",
    parent: "#birthMunicipality",
    maxHeight:500,
    width:300,
    deferRequestBy:300,
    // callback function:
    onSelect: function(value, data){
        jQuery("#birthAreaId").val(data);
    }
  });
</script>

    <script type="text/javascript">
 new Autocomplete('country', {
    serviceUrl:'<c:url value="/hello.json" />',
    minChars:1,
    clazz: "Country",
    parent: "",
    maxHeight:500,
    width:300,
    deferRequestBy:300,
    // callback function:
    onSelect: function(value, data){
        jQuery("#countryId").val(data);
        enableField("1", "#municipality");
    }
  });
</script>
        <script type="text/javascript">

  new Autocomplete('municipality', {
    serviceUrl:'<c:url value="/hello.json" />',
    minChars:1,
    clazz: "Municipality",
    parent: "#country",
    maxHeight:500,
    width:300,
    deferRequestBy:300,
    // callback function:
    onSelect: function(value, data){
       jQuery("#municipalityId").val(data);
       enableField("1", "#area");
    }
  });
</script>
        <script type="text/javascript">

  new Autocomplete('area', {
    serviceUrl:'<c:url value="/hello.json" />',
    minChars:1,
    clazz: "GeoArea",
    parent: "#municipality",
    maxHeight:500,
    width:300,
    deferRequestBy:300,
    // callback function:
    onSelect: function(value, data){
        jQuery("#areaId").val(data);
        
    }
  });



  jQuery("#birthCountry").blur( function () {
            if (jQuery("#birthCountryId").val() == "") {
                jQuery(this).val("");
            }
             if (jQuery(this).val() == "") {
                  jQuery("#birthCountryId").val("");
                  enableField("0", "#birthMunicipality");
                  enableField("0", "#birthArea");
             }
  });

  jQuery("#birthMunicipality").blur( function () {
            if (jQuery("#birthMunicipalityId").val() == "") {
                jQuery(this).val("");
            }
              if (jQuery(this).val() == "") {
                jQuery("#birthMunicipalityId").val("");

                enableField("0", "#birthArea");
            }
          
  });

  jQuery("#birthArea").blur( function () {
            if (jQuery("#birthAreaId").val() == "") {
                jQuery(this).val("");
            }

            if (jQuery(this).val() == "") {
                jQuery("#birthAreaId").val();
            }
  });

  jQuery("#country").blur( function () {
            if (jQuery("#countryId").val() == "") {
                jQuery(this).val("");
            }
             if (jQuery(this).val() == "") {
                  jQuery("#countryId").val("");
                  enableField("0", "#municipality");
                  enableField("0", "#area");
             }
  });

  jQuery("#municipality").blur( function () {
            if (jQuery("#municipalityId").val() == "") {
                jQuery(this).val("");
            }
            if (jQuery(this).val() == "") {
                jQuery("#municipalityId").val("");
                
                enableField("0", "#area");
            }
  });
  jQuery("#area").blur( function () {
            if (jQuery("#areaId").val() == "") {
                jQuery(this).val("");
            }
            if (jQuery(this).val() == "") {
                jQuery("#areaId").val();
            }

  });
//

if (jQuery("#municipalityId").val() == "") {
    enableField("0", "#municipality");
}
if (jQuery("#areaId").val() == "") {
    enableField("0", "#area");
}
if (jQuery("#birthAreaId").val() == "") {
    enableField("0", "#birthArea");
}

function enableField(flag, el) {
 
    elem = jQuery(el);

    if (flag == "1") {
         elem.removeAttr("disabled");
         elem.css("background-color", "#EAEAEA");     
        
    }
    else {
      elem.val("");
      elem.next().val("");
      elem.attr("disabled", "disabled");
      elem.css("background-color", "#ccc");
    }
}

</script>

